<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="..\node_modules\vue\dist\vue.js"></script>

</head>
<body>

<h1>refer to https://blog.csdn.net/xiaolinlife/article/details/107013723</h1>

<div id="app">
    <p>
        on绑定下的事件，由其在标签中的先后顺序决定。
    </p>
    <input style="width: 500px" v-model="message"
           v-on:click="_click"
           v-on:click="p_click"
    >

    <p>
        modifer .prevent 阻止 a/button(type="submit") 的默认事件。
    </p>
    <a
       href="javascript:console.log('click from href of tag a')"
       v-on:click="_click"
       v-on:click.prevent="p_click"
    >
        It is a tag A.
    </a>

    <p>
        .self/.stop v-on:click.self/v-on:click 同时设置，前后顺序影响效果。
    </p>
    <div style="width: 300px;height: 300px;background-color: black;"
         v-on:click.self="self_click" v-on:click="u_click">
        <div style="width: 200px;height: 200px;background-color:green;"
             v-on:click="_click" v-on:click.stop="s_click">
        </div>
    </div>

    <p>
        .capture 由外到内响应事件
    </p>
    <div style="width: 300px;height: 300px;background-color: black;"
         v-on:click.capture="self_click" v-on:click="u_click">
        <div style="width: 200px;height: 200px;background-color:green;"
             v-on:click.stop="s_click">
        </div>
    </div>

</div>
</body>
<script type="application/javascript">
    var app_data = {
        message: 'Hello Vue!'
    };

    var app = new Vue({
        el: '#app',
        data: app_data,
        methods:{
            p_click : function(){
                console.log("_click prevent")
            },
            self_click : function(){
                console.log("_click self")
            },
            u_click : function(){
                console.log("_click upper")
            },
            s_click : function(){
                console.log("_click stop")
            },
            _click : function(){
                console.log("_click")
            },
        }
    });
</script>
</html>
